{% extends "base.html" %}

{% load static %}
{% load lists_extras %}

{% block js %}
<script src="{% static 'lists/js/jquery.tablesorter.min.js' %}"></script>
<script type="text/javascript" id="js">
$(document).ready(function() {
  var timeExtraction = function(node) {
    if ($(node).attr('data-time-in-seconds') !== undefined) {
      return '-' + node.getAttribute('data-time-in-seconds');
    } else {
      return node.innerHTML;
    }
  }
  $("#todolist-overview-table").tablesorter({
    textExtraction: timeExtraction
  });
});
</script>
{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'lists/css/table.css' %}"> {% endblock %}

{% block body %}
<section class="header">
  <h2 class="title">Todolist overview</h2>
  <div class="row">
    <div class="three columns value-prop"></div>
    <div class="six columns">
      <form action="{% url 'lists:add_todolist' %}" method=post>
        {% csrf_token %}
        <dl>
          <dd>{{ form }}
          <dt><input type="submit" value="Submit">
        </dl>
      </form>
    </div>
  </div>
  <div class="row">
    <div class="u-full-width">
      <h6 class="docs-header todolist-overview">All your todolists</h6>
      <table id="todolist-overview-table" class="tablesorter">
        <thead>
          <tr>
            <th class='todolist-title'>Todolist title</th>
            <th># Open</th>
            <th># Finished</th>
            <th class="datetime">Created at</th>
          </tr>
        </thead>
        <tbody>
          {% for todolist in user.todolists.all %}
          <tr>
            <td class='todolist-title'><a href="{% url 'lists:todolist' todolist_id=todolist.id %}">{{ todolist.title }}</a></td>
            <td>{{ todolist.count_open }}</td>
            <td>{{ todolist.count_finished }}</td>
            <td data-time-in-seconds="{{ todolist.created_at|in_seconds }}">{{ todolist.created_at|humanize }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}
